<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Media Query and Caching</title>
  <link rel="import" href="../../polymer.html">
</head>

<body>
  <dom-module id="my-element">
    <template>
      <style>
        :root {
          --color: orange;
        }

        @media(max-width: 800px) {
          :root {
            --color: green;
          }
        }

        div {
          height: 50px;
          width: 50px;
          background: var(--color);
          color: var(--text-color);
        }

        :host {
          display: block;
          background: blue;
          height: 100px;
          --text-color: white;
        }

        @media(max-width: 800px) {
          :host {
            background: red;
          }
        }

        :host([foo]) {
          --text-color: black;
        }

        :host-context([bar]) {
          --text-color: lightgray;
        }
      </style>
      <div>text</div>
    </template>
    <script>
      Polymer({
        is: 'my-element'
      });
    </script>
  </dom-module>
  <div bar>
    <my-element foo></my-element>
  </div>
</body>

</html>
